import { Button } from "antd";
import { ContactRoundIcon, PlusIcon } from "lucide-react";
import { useEffect, useState } from "react";
import { apiRolesList } from "~/api";
import Divider from "~/components/ui/divider";
import Title from "~/components/ui/title";
import type { IRole } from "~/types/manage/system/role";
import { cn } from "~/utils/ui.util";
import Empty from "./manage/system/empty";
import Role from "./manage/system/role/role";

export default function Page() {
  const [selectRole, setSelectRole] = useState<Partial<IRole> | null>(null);

  const [dataList, setDataList] = useState<IRole[]>([]);
  const [loading, setLoading] = useState(false);

  const _fetch = {
    init: async () => {
      const resp = await apiRolesList();
      setDataList(resp);
    },
  };

  useEffect(() => {
    _fetch.init();
  }, []);

  return (
    <div className="flex h-full w-full gap-4">
      <div className="flex h-full w-[240px] flex-col gap-4">
        <Title
          title="角色"
          buttonGroups={[
            <Button
              type="primary"
              onClick={() => {
                setSelectRole({});
              }}
            >
              <PlusIcon size={18} />
              添加角色
            </Button>,
          ]}
        />
        <div className="flex w-full flex-1 flex-col gap-2 overflow-auto">
          {dataList.map((item) => {
            return (
              <div
                key={item.id}
                className={cn(
                  "group/item flex h-10 cursor-default items-center justify-between gap-1 rounded px-2 py-2",
                  {
                    "bg-gray-200": selectRole?.id === item.id,
                    "hover:bg-gray-100": selectRole?.id !== item.id,
                  },
                )}
                onClick={() => {
                  setSelectRole(item);
                }}
              >
                <p className="flex-1 overflow-hidden text-ellipsis">
                  {item.name}
                </p>
              </div>
            );
          })}
        </div>
      </div>
      <Divider />
      <div className="flex flex-1 flex-col gap-4 overflow-hidden">
        {selectRole ? (
          <Role roleInfo={selectRole} onOk={() => _fetch.init()} />
        ) : (
          <Empty icon={ContactRoundIcon} title="请选择左侧角色进行操作" />
        )}
      </div>
    </div>
  );
}
